<template>
	<view class="cc">
		<u-row justify="space-between" gutter="20">
			<u-col span="3">
				<text class="title">{{tname}}</text>
			</u-col>
			<u-col span="4">
				<view @click="click1">
					<uni-easyinput type="text" v-model="value3" suffixIcon="calendar" disabled />
				</view>
				<view>
					<u-datetime-picker :show="show1" v-model="value3" mode="time" @confirm="confirm1"
						@cancel="cancel1"></u-datetime-picker>
				</view>
			</u-col>
			<u-col span="0.5">
				<text class="title">--</text>
			</u-col>
			<u-col span="4">
				<view @click="click2">
					<uni-easyinput type="text" v-model="value4" suffixIcon="calendar" disabled />
				</view>
				<view>
					<u-datetime-picker :show="show2" v-model="value4" mode="time" @confirm="confirm2"
						@cancel="cancel2"></u-datetime-picker>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		name: "time_picker",
		data() {
			return {
				show1: false,
				show2: false,
				value3: '',
				value4: ''
			};
		},
		props: {
			//从父控件传过来的值
			tname: {
				type: String,
				value: 'q11'
			},
			value1: '',
			value2: '',
		},
		onLoad() {
			this.value3 = this.value1
			this.value4 = this.value2
		},
		methods: {
			click1() {
				this.show1 = true
			},
			cancel1() {
				this.show1 = false
			},
			confirm1(e) {
				this.show1 = false
				this.$emit('changeValue1', e.value)
			},
			click2() {
				this.show2 = true
			},
			cancel2() {
				this.show2 = false
			},
			confirm2(e) {
				this.show2 = false
				this.$emit('changeValue2', e.value)
			},

		}
	}
</script>

<style>
	.title {
		height: 50rpx;
		position: absolute;
		transform: translate(0, -50%);
	}

	.cc {
		margin-top: 32rpx;
		height: 100rpx;
	}
</style>